<div class="common-search-wrap">
  <form [formGroup]="form" [ngSwitch]="display">
    <mat-form-field>
      <input autocomplete="off" matInput formControlName="search" [(ngModel)]="value" placeholder="{{placeHolder}}">
      <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="clear()">
        <svg fill="#757575" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
              <path d="M0 0h24v24H0z" fill="none"/>
        </svg>
      </button>
    </mat-form-field>

    <div class="search-list-wrap">
      <mat-nav-list *ngSwitchCase="'none'">
        <mat-list-item>
          No Item
        </mat-list-item>
      </mat-nav-list>

      <mat-nav-list *ngSwitchCase="'show'" >
        <mat-list-item *ngFor="let data of searchList" (click)="choose(data)">
          {{data[field]}}
        </mat-list-item>
      </mat-nav-list>
    </div>
  </form>
</div>
